<template>
  <div class="content">
    <div class="clear" style="padding-bottom:20px;">
      <Form :model="query" label-position="left" :label-width="100">
        <!-- <Input v-model="query.number" class="w200 m-r10" placeholder="项目编号" /> -->
        <!-- <Select placeholder="请选状态" class="w200 m-r10" v-model="query.status">
          <Option value="0">请选状态</Option>
          <Option value="1">进行中</Option>
          <Option value="2">已结算</Option>
        </Select>-->
        <DatePicker
          :value="dataValue"
          type="daterange"
          split-panels
          placeholder="请选择时间段"
          class="w200 m-r10"
          format="yyyy-MM-dd"
          @on-change="getTime"
          :current.sync="page"
        ></DatePicker>
        <Button type="primary" v-on:click="getConditionQuery()">查询</Button>
        <Button type="primary" class="fr" @click="addT()">分红</Button>
      </Form>
    </div>
    <Table stripe :columns="columns1" :data="data1"></Table>
    <!-- 分页 -->
    <Page
      :total="info"
      show-elevator
      show-total
      :page-size="pageSize"
      @on-change="cuctGetQuery"
      :current.sync="page"
    />
    <!-- 添加 -->
    <Modal v-model="Modal" title="分红" width="40%">
      <Form :label-width="140" :model="addForm" :rules="rules" ref="refuse">
        <!-- <FormItem label="选择项目" prop="freight">
					<Select placeholder="请选择项目" class="w200 m-r10" v-model="addForm.number">
						<Option :value="item.number" v-for="(item,index) in list" :key="index">{{item.cnTitle}}</Option>
					</Select>
				</FormItem>
				<FormItem label="项目描述(中文)" prop="cnContent">
					<quill-editor v-model="addForm.cnContent" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
				</FormItem>
				<FormItem label="项目描述(英文)" prop="usContent">
					<quill-editor v-model="addForm.usContent" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
        </FormItem>-->
        <!-- <FormItem label="项目描述(越南文)" prop="vnContent">
					<quill-editor v-model="addForm.vnContent" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
        </FormItem>-->
        <!-- <FormItem label="时间" prop="freight">
         <DatePicker type="datetime" placeholder="请选择时间" v-model="lotteryDate" @on-change="lottery"></DatePicker>
        </FormItem>-->
        <FormItem label="平台持有量" prop="cnTitle">
          <Input class="w-50" v-model="addForm.number == '' ? 0 : addForm.number" disabled />
        </FormItem>
        <FormItem label="分红数量" prop="usTitle">
          <Input class="w-50" v-model="addForm.usTitle" :value="addForm.usTitle" placeholder="请输入分红数量(USDT)" ref="referenceInput"   @blur.native.capture="onClickInputKeyBoard" />
          

        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="Modal=false">取消</Button>
        <Button type="primary" size="large" :loading="marked" @click="addproduct1">确定</Button>
      </div>
    </Modal>
    <!-- 修改 -->
    <Modal v-model="Modal1" title="修改" width="40%">
      <Form :label-width="140" :model="editForm" :rules="rules" ref="refuse">
        <FormItem label="选择项目" prop="freight">
          <Select placeholder="请选择项目" disabled class="w200 m-r10" v-model="editForm.number">
            <Option :value="item.number" v-for="(item,index) in list" :key="index">{{item.cnTitle}}</Option>
          </Select>
        </FormItem>
        <FormItem label="项目描述(中文)" prop="cnContent">
          <quill-editor
            v-model="editForm.cnContent"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
        </FormItem>
        <FormItem label="项目描述(英文)" prop="usContent">
          <quill-editor
            v-model="editForm.usContent"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
        </FormItem>
        <!-- <FormItem label="项目描述(越南文)" prop="vnContent">
					<quill-editor v-model="editForm.vnContent" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
        </FormItem>-->
        <!-- <FormItem label="时间" prop="freight">
        <DatePicker type="datetime" placeholder="请选择时间" v-model="lotteryDate" @on-change="lottery"></DatePicker>
        </FormItem>-->
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="Modal1=false">取消</Button>
        <Button type="primary" size="large" @click="editproduct">确定</Button>
      </div>
    </Modal>
    <!-- 查看详情 -->
    <Modal v-model="modal2" title="明细" width="55%">
      <Input type="text" placeholder="UUID" class="w200 m-r10" v-model.trim="uuid" />
      <DatePicker
        :value="dataValue2"
        type="daterange"
        split-panels
        placeholder="请选择时间段"
        class="w200 m-r10"
        format="yyyy-MM-dd"
        @on-change="getTime2"
      ></DatePicker>
      <Button type="primary" v-on:click="getQueryById1">查询</Button>
      <Table class="m-t10" stripe :columns="columns2" :data="list2" :loading="loading2" ref="table"></Table>
      <Page :total="info2" show-elevator :page-size="pageSize2" show-total @on-change="getQueryById" :current.sync="page2"></Page>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: null, //总条数
      pageSize: 10, //每页条数
      page: 1, //当前页码
    info2:null,
    pageSize2:5,
    page2:1,

      list: [],
      listEdit: [],
      editorOption: this.quillOption,
      lotteryDate: "",
      dataValue: ["", ""], //时间段
      dataValue2: ["", ""], // 时间段值
      rules: {},
      uuid: null,
      marked: false, //防止重复提交
      query: {
        number: "",
        status: "",
        startTime: ""
      },
      loading2: false,
      columns1: [
        {
          title: "分红总额(USDT)",
          align:'center',
          key: "total"
        },
        {
          title: "平台持有量(Estate)",
          align:'center',
          key: "platformTotal"
        },
        {
          title: "明细",
          align:'center',
          key: "usContent ",
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  cursor: "pointer",
                  color: "#2db7f5"
                },
                on: {
                  click: () => {
                    this.modal2 = true;
                    this.byId = params.row.id;
                    this.dataValue2 = ["", ""];
                    this.uuid = ''
                    this.getQueryById(this.byId);
                    
                  }
                }
              },
              "查看详情"
            );
          }
        },
        // {
        // 	title: "描述(越南文)",
        // 	key: "vnContent ",
        // 	render: (h, params) => {
        // 		return h("div", {
        // 			domProps: {
        // 				innerHTML: params.row.vnContent
        // 			},
        // 			style: {
        // 				textOverflow: "ellipsis",
        // 				whiteSpace: "nowrap",
        // 				overflow: "hidden"
        // 			}
        // 		});
        // 	}
        // },
        {
          title: "创建时间",
          align:'center',
          key: "createTime ",
          render: (h, params) => {
            return h(
              "div",
              params.row.createTime == "null"
                ? "#"
                : this.stringToTime(params.row.createTime)
            );
          }
        }
        // {
        // 	title: "操作",
        // 	key: "action",
        // 	width: 150,
        // 	align: "center",
        // 	render: (h, params) => {
        // 		return h("div", [
        // 			h(
        // 				"Button", {
        // 					props: {
        // 						type: "primary",
        // 						size: "small"
        // 					},
        // 					style: {
        // 						marginRight: "5px"
        // 					},
        // 					on: {
        // 						click: () => {

        // 							this.Modal1 = true;
        // 							// console.log(params.row);
        // 							this.editForm = Object.assign({}, params.row);
        // 							// this.editForm = params.row
        // 							// console.log(this.editForm);
        // 						}
        // 					}
        // 				},
        // 				"修改"
        // 			),
        // 			h(
        // 				"Button", {
        // 					props: {
        // 						type: "error",
        // 						size: "small"
        // 					},
        // 					on: {
        // 						click: () => {
        // 							this.Modal2 = true;
        // 							this.$Modal.confirm({
        // 								title: "删除进展",
        // 								content: "是否要删除该进展？",
        // 								onOk: () => {
        // 									console.log(params.row.id);
        // 									this.delete(params.row.id);
        // 								}
        // 							});
        // 						}
        // 					}
        // 				},
        // 				"删除"
        // 			)
        // 		]);
        // 	}
        // }
      ],
      columns2: [
        {
          title: "UUID",
          align:'center',
          key: "uuid"
        },
        {
          title: "持有量(Estate)",
          align:'center',
          key: "singleTotal"
        },
        {
          title: "占比",
          align:'center',
          key: "ratio"
        },
        {
          title: "分红数量(USDT)",
          align:'center',
          key: "num"
        },
        {
          title: "状态 ",
          align:'center',
          key: "status",
          render: (h, params) => {
            return h(
              "div",
              params.row.status == "null"
                ? "#"
                : params.row.status == 1
                ? "处理中"
                : params.row.status == 2
                ? "成功"
                : "失败"
            );
          }
        },
        // {
        // 	title: "描述(越南文)",
        // 	key: "vnContent ",
        // 	render: (h, params) => {
        // 		return h("div", {
        // 			domProps: {
        // 				innerHTML: params.row.vnContent
        // 			},
        // 			style: {
        // 				textOverflow: "ellipsis",
        // 				whiteSpace: "nowrap",
        // 				overflow: "hidden"
        // 			}
        // 		});
        // 	}
        // },
        {
          title: "创建时间",
          align:'center',
          key: "createTime ",
          render: (h, params) => {
            return h(
              "div",
              params.row.createTime == "null"
                ? "#"
                : this.stringToTime(params.row.createTime)
            );
          }
        }
      ],
      data1: [],
      Modal: false,
      modal2: false,
      addForm: {
        cnContent: "", //中文内容
        // createTime :'',//时间
        number: "", //项目编号
        usContent: "", //英文内容
        vnContent: "" //越南文内容
      },
      editForm: {
        cnContent: "", //中文内容
        // createTime :'',//时间
        number: "", //项目编号
        usContent: "", //英文内容
        vnContent: "" //越南文内容
      },
      Modal1: false,
      list2: []
    };
  },
  methods: {
    onClickInputKeyBoard(){
        //  this.addForm.usTitle = this.addForm.usTitle.toString().match(/^\d*(\.?\d{0,4})/g)[0] || null
      
       this.$nextTick(()=>{
          // console.log(this.addForm.usTitle);
          this.$refs.referenceInput.value = this.addForm.usTitle.toString().match(/^\d*(\.?\d{0,4})/g)[0] || null
       })
       
    },
    //页面加载
    getprogress(page) {
      let obj = this.qs.stringify({
        current: page,
        size: this.pageSize,
        // number: this.query.number,
        // status: this.query.status,
        startTime:
          this.dataValue[0] == "" ? "" : this.dataValue[0] + " 00:00:01", // 起始日期,
        endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + " 23:59:59" // 结束日期,
      });
      // console.log(this.dataValue);
      //  console.log(obj);

      this.axios.post("/platform/share/query",obj).then(res => {
        this.data1 = res.data.data.records;
        this.info = res.data.data.total;
      });
    },
    add() {
      // this.addForm = {
      // 		cnContent: "", //中文内容
      // 		// createTime :'',//时间
      // 		number: "", //项目编号
      // 		usContent: "", //英文内容
      // 		vnContent: "" //越南文内容
      // 	},
      this.axios.get("/platform/share/sum").then(res => {
        // console.log(res.data.data);

        // console.log(res.data.data.records);
        this.addForm.number = res.data.data;
        // res.data.data.records.forEach(item=>{
        //   console.log(item.number);
        //   this.list.push(item.number)
        // })
      });
    },
    addT() {
      this.dataValue= ["", ""], 
      this.addForm.usTitle = "";
      this.Modal = true;
      this.add();
      this.marked = false;
    },
    //添加事件
    addproduct() {
      if (this.addForm.number == "") {
        this.$Message.info("项目不能为空");
        return;
      }
      if (this.addForm.cnContent == "") {
        this.$Message.info("项目描述中文不能为空");
        return;
      }
      if (this.addForm.usContent == "") {
        this.$Message.info("项目描述英文不能为空");
        return;
      }
      if (this.addForm.vnContent == "") {
        this.$Message.info("项目描述越南文不能为空");
        return;
      }
      let params = this.qs.stringify({
        cnContent: this.addForm.cnContent, //中文内容
        // createTime :this.stringToTime(this.addForm.createTime),//时间
        number: this.addForm.number, //项目编号
        usContent: this.addForm.usContent, //英文内容
        vnContent: this.addForm.vnContent //越南文内容
      });
      if (!this.marked) {
        this.marked = true;
        this.axios.post("crowdfunding/progress/add", params).then(res => {
          if (res.data.code === 200) {
            this.Modal = false;
            this.page = 1
            this.getprogress(this.page);
            this.$Message.info(res.data.msg);
          }
          setTimeout(() => {
            this.marked = false;
          }, 1000);
        });
      }
    },
    //修改事件
    editproduct() {
      if (this.editForm.cnContent == "") {
        this.$Message.info("项目描述中文不能为空");
        return;
      }
      if (this.editForm.usContent == "") {
        this.$Message.info("项目描述英文不能为空");
        return;
      }
      if (this.editForm.vnContent == "") {
        this.$Message.info("项目描述越南文不能为空");
        return;
      }
      let obj = this.qs.stringify({
        cnContent: this.editForm.cnContent, //中文内容
        // createTime :'this.addFrom时间
        number: this.editForm.number, //项目编号
        usContent: this.editForm.usContent, //英文内容
        vnContent: this.editForm.vnContent, //越南文内容
        id: this.editForm.id
      });
      this.axios.post("/crowdfunding/progress/update", obj).then(res => {
        if (res.data.code === 200) {
          this.$Message.info(res.data.msg);
          this.Modal1 = false;
          this.page = 1
          this.getprogress(this.page);
        }
      });
    },
    //删除事件
    delete(id) {
      this.axios.delete(`/crowdfunding/progress/delete/${id}`).then(res => {
        if (res.data.code === 200) {
          this.$Message.info(res.data.msg);
          this.page = 1
          this.getprogress(this.page);
        }
      });
    },
    //页码改变的回调
    cuctGetQuery() {
      this.getprogress(this.page);
    },
    //查询事件
    getConditionQuery() {
    	this.page = 1
      this.getprogress(this.page);

    },
    getQueryById1(){
      this.page2 = 1;
      let obj = this.qs.stringify({
        current:this.page2,
        size: this.pageSize2,
        // number: this.query.number,
        // status: this.query.status,
        startTime:
          this.dataValue2[0] == "" ? "" : this.dataValue2[0] + " 00:00:01", // 起始日期,
        endTime:
          this.dataValue2[1] == "" ? "" : this.dataValue2[1] + " 23:59:59", // 结束日期,
        platformShareId: this.byId,
        uuid: this.uuid
      });
      // console.log(this.dataValue);
      //   console.log(obj);
      this.axios.post("/platform/share/get/platformDetails", obj).then(res => {
        console.log(res);
        this.list2 = res.data.data.records;
        this.info2 = res.data.data.total;
      });
    },
    getTime(daterange) {
      // 处理时间段时间格式
      this.dataValue = daterange;
    }, //时间
    lottery() {},
    productCannel() {},
    product() {},
    onEditorBlur() {},
    onEditorFocus() {},
    onEditorChange() {},
    getTime2(daterange) {
      this.dataValue2 = daterange;
    },
    getQueryById() {
    	
      let obj = this.qs.stringify({
        current: this.page2,
        size: this.pageSize2,
        // number: this.query.number,
        // status: this.query.status,
        startTime:
          this.dataValue2[0] == "" ? "" : this.dataValue2[0] + " 00:00:01", // 起始日期,
        endTime:
          this.dataValue2[1] == "" ? "" : this.dataValue2[1] + " 23:59:59", // 结束日期,
        platformShareId: this.byId,
        uuid: this.uuid
      });
      // console.log(this.dataValue);
      //   console.log(obj);
      this.axios.post("/platform/share/get/platformDetails", obj).then(res => {
        console.log(res);
        this.list2 = res.data.data.records;
        this.info2 = res.data.data.total;
      });
    },
    //分红事件
    addproduct1() {
      if (this.addForm.usTitle == "") {
        this.$Message.info("分红数量不能为空");
        return;
      }
      if (isNaN(this.addForm.usTitle)) {
        this.$Message.info("分红数量请输入数字");
        return;
      }
      if (this.addForm.usTitle < 0 ) {
        this.$Message.info("分红数量不能为负数");
        return;
      }
      var obj = this.qs.stringify({
        share: this.addForm.usTitle
      });
      if (!this.marked) {
        this.marked = true;
        this.axios.post("/platform/share/platform/doShare", obj).then(res => {
          // console.log(res);
          if (res.data.code == 200) {
            this.Modal = false;
            this.$Message.info(res.data.msg);
            this.page = 1
            this.getprogress(this.page)
          }
           setTimeout(() => {
            this.marked = false;
          }, 1000);
        });
      }
    }
  },
  created() {
    this.add();
  },
  mounted() {
    this.getprogress(this.page);
  },
 
};
</script>

<style scoped>
</style>